<template>
  <button :class="classes" :disabled="disabled ||loading" @tap.native="handleClick">
    <van-loading v-if="loading" :size="loadingSize"></van-loading>
    <slot></slot>
  </button>
</template>

<script>
  export default {
    name: 'AxqBtn',
    components: {},
    mixins: [],
    props: {
      type: {
        type: String,
        default: 'default'
      },
      hollow: Boolean,
      size: String,
      disabled: Boolean,
      loading: Boolean,
      round: Boolean
    },
    data() {
      return {}
    },
    computed: {
      classes() {
        let str = `axq-btn axq-btn--${this.type}`
        if (this.size) str += ` axq-btn--${this.size}`
        if (this.disabled || this.loading) str += ' axq-btn--disabled'
        if (this.hollow) str += ' axq-btn--hollow'
        if (this.loading) str += ' axq-btn--loading'
        if (this.round) str += ' axq-btn--round'
        return str
      },
      loadingSize() {
        let res = '20px'
        if (this.size == 'large') {
          res = '18px'
        }
        return res
      }
    },
    methods: {
      handleClick(e) {
        e.preventDefault()
        e.stopPropagation()
      }
    }
  }
</script>

<style lang="less" scoped>
  .axq-btn {
    .transition-mix();
    display: inline-block;
    font-size: 30rpx;
    color: @color-theme;
    background: #fff;
    border-color: transparent;
    overflow: hidden;

    &::after {
      transform: none;
      width: 100%;
      height: 100%;
      border-color: transparent;
      border: 1px solid #db197b;
    }

    &--text {
      background: transparent;
      box-shadow: none;
      color: @color-theme;

      &::after {
        border: none;
      }
    }

    &--sub {
      color: #fff;
      background: #ccc;
    }

    &--primary {
      background: @color-theme;
      color: #fff;

      &[disabled] {
        background: @color-theme--disabled;
        color: #fff;

        &::after {
          border-color: @color-theme--disabled;
        }
      }
    }

    &--info {
      background: @color-theme;
      color: #fff;

      &[disabled] {
        background: @color-theme--disabled;
        color: #fff;
      }
    }

    // size
    &--large {
      height: 90rpx;
      line-height: 90rpx;
      font-size: @font-size-large;
    }

    &--small {
      height: 40rpx;
      line-height: 40rpx;
      font-size: 24rpx;
    }

    &--round {
      border-radius: 40rpx;

      &::after {
        border-radius: 40rpx;
      }

      &.axq-btn--large,
      &::after {
        border-radius: 45rpx;
      }
    }

    &:active {
      filter: brightness(0.8);
    }

    &--hollow {
      &.axq-btn--primary {
        background: transparent;
        color: @color-theme;
        border: none;
        border-color: transparent;

        &::after {
          border-radius: 30rpx;
        }
      }
    }

    van-loading {
      margin-right: 24rpx;
    }
  }
</style>